<template>
	<view v-if="loading || error" class="loading_view">
		<u-loading mode="circle" v-if="loading" size="50"></u-loading>
		<u-toast ref="uToast" />
		<view class="messgae">{{ loading?'加载中...':'加载失败' }}</view>
	</view>
	<view v-else>
		<u-toast ref="uToast" />
		<view class="box">
			<view class='select'>
				<view class='head' @click="check">
					已选择
				</view>
				<view class='cont'>
					<view class='cont_item' v-for="(v,k) in select_hobby" :key="k">{{hobby[v].h_name}}</view>
				</view>
			</view>
			<view class="chose">
				<view v-for="(v,k) in parent_hobby" :key="k" class='list'>
					<view class='head'>
						{{ v.h_name }}
					</view>
					<view class="cont">
						<view  class="tag_item" v-for="(v2,k2) in hobby" :key="k2" v-if="v.h_id==v2.h_parentId" @click="check" :data-id="v2.h_id">
							<view :class='select_hobby.indexOf(v2.h_id)!=-1?"sel":"" '>{{v2.h_name}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class='btn_box'>
				<view class="btn" @click="submit">{{ sub_status?'保存中...':'保存' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				hobby:{},
				parent_hobby:{},
				select_hobby:[],
				sub_status:false,
				loading:false,
				error:false
			}
		},
		methods:{
			submit(){
				
				if(this.sub_status){
					return false
				}
				
				this.sub_status = true
				
				let select_hobby = this.select_hobby.join(',')
				
				let that = this
				
				this.$request({
					url:'/user/hobby_save',
					data:{select_hobby:select_hobby},
					method:'post',
					success(res){
						if(res.statusCode==200){
							
							if(res.data.code==1){
								
								that.$refs.uToast.show({
									title: '保存成功',
									type: 'success'
								})
								
							}else{
								
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
								
							}
							
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
						}
					},
					fail(){
						that.$refs.uToast.show({
							title: '提交失败',
							type: 'warning'
						})
					},
					complete(){
						that.sub_status = false
					}
				})
			},
			getData(){
				
				let that = this
				
				this.loading = true
				
				this.$request({
					url:'/user/hobby',
					method:'post',
					success(res){
						
						if(res.statusCode==200){
							if(res.data.code==1){
									
								that.hobby = res.data.data.hobby
								
								that.parent_hobby = res.data.data.parent_hobby
								
								if(!res.data.data.select_hobby){
									that.select_hobby = []
								}else{
									that.select_hobby = res.data.data.select_hobby.split(',')
								}
								
								
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
								
								that.error = true
							}
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙~',
								type: 'warning'
							})
							
							that.error = true
						}
						
					},
					fail(){
						that.$refs.uToast.show({
							title: '数据获取失败',
							type: 'warning'
						})
						
						that.error = true
					},
					complete(){
						that.loading = false
					}
				})
			},
			check(e){
				/* console.log(e)
				console.log(e.currentTarget.dataset.id) */
				
				let id=e.currentTarget.dataset.id
				
				let index=this.select_hobby.indexOf(id)
				
				if(index!=-1){
					this.select_hobby.splice(index,1)
				}else{
					this.select_hobby.push(id)
				}
			}
		},
		onShow(){
			this.getData()
		}
	}
</script>

<style scoped>
	.box{
		background-color: #F7F7F7;
	}
	.box .select{
		background:#fff;
		padding:20rpx 30rpx;
	}
	.box .select .head{
		padding:20rpx 0;
		font-size:30rpx;
	}
	.box .select .cont{
		padding: 0 20rpx;
		display:flex;
		flex-wrap: wrap;
	}
	.box .select .cont view{
		font-size:30rpx;
		background:#F5F5F5;
		color:#2B2B2B;
		padding:7rpx 20rpx;
		border-radius:30rpx;
		margin-right:20rpx;
		margin-top: 10rpx;
	}
	.box .chose{
		background:#fff;
		padding:20rpx 30rpx;
		margin-top:30rpx;
	}
	.list{
		border-bottom:1px solid #F2F2F2;
	}
	.box .chose .head{
		padding:20rpx 0;
		font-size:30rpx;
	}
	.box .chose .cont{
		padding: 30rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
	}
	
	.box .chose .cont view.tag_item{
		font-size:30rpx;
		/* background:#F5F5F5;
		color:#2B2B2B; */
		margin:15rpx 13rpx;
	}
	
	.box .chose .cont view.tag_item view{
		font-size:30rpx;
		background:#F5F5F5;
		color:#2B2B2B;
		padding:7rpx 20rpx;
		border-radius:30rpx;
	}
	
	.box .chose .cont view.tag_item view.sel{
		background:#EA4389;
		color:#fff;
	}
	.btn_box{
		width:100%;
		padding:40rpx 0;
		background:#fff;
	}
	.btn{
		width:250rpx;
		height:80rpx;
		background:#EA4389;
		border-radius:40rpx;
		color:#fff;
		margin:auto;
		text-align: center;
		line-height: 80rpx;
	}
</style>
